body {
  font-family: $font-family-sans-serif;
  font-weight: $font-family-sans-serif-weight;
  margin: 0;
  padding: 0;
  line-height: 2;
}

::selection {
  color: #fff;
  background: $selection-bg;
}

a {
  color: var(--smc-link-color);
  text-decoration: none;
  transition: color 0.1s;

  &:hover, &:focus {
    color: $colors.danger;
  }

  &:active {
    color: lighten($colors.link, 20%);
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
}

$--head-font-size-base = 1rem !default;
$--head-font-size-step = 0.3rem !default;

h1 {
  font-size: $--head-font-size-base + 5 * $--head-font-size-step;
  font-weight: $font-family-sans-serif-weight;
}

h2 {
  font-size: $--head-font-size-base + 4 * $--head-font-size-step;
  font-weight: $font-family-sans-serif-weight;
}

h3 {
  font-size: $--head-font-size-base + 3 * $--head-font-size-step;
  font-weight: $font-family-sans-serif-weight;
}

h4 {
  font-size: $--head-font-size-base + 2 * $--head-font-size-step;
  font-weight: $font-family-sans-serif-weight;
}

h5 {
  font-size: $--head-font-size-base + $--head-font-size-step;
  font-weight: $font-family-sans-serif-weight;
}

h6 {
  font-size: $--head-font-size-base;
}

button {
  outline: none;
}

p {
  font-size: inherit;
  font-weight: inherit;

  &:first-child {
    margin-top: 0;
  }
}

hr {
  opacity: 0.2;
  margin: 1rem;
}

// html5 extend
$details-border-color = var(--smc-secondary);

details {
  border: 1px solid $details-border-color;
  margin: 1rem 0;

  &[open] {
    padding: 1rem 1rem 0 1rem;
  }
}

summary {
  font-weight: bold;
  padding: 0.8rem 0.8rem 0.8rem 1rem;
  background-color: rgba($colors.primary, 0.1);
}

details[open] summary {
  border-bottom: 1px solid $details-border-color;
  margin: -1rem -1rem 1rem -1rem;
}
